<template>
  <div style="padding: 20px;">
    <el-card class="box-card" style="margin-bottom: 30px;">
      <template #header>
        <div class="box_left">
          <div>
            <el-icon>
              <Tickets />
            </el-icon>
          </div>
          <div>
            数据列表
          </div>

        </div>
        <div>
          <el-button type="primary" class="top_button" @click="addItem">填加</el-button>
        </div>
      </template>
    </el-card>




    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :border=true
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60" />
      <el-table-column label="编号" width="120" property="id">
      </el-table-column>
      <el-table-column property="name" label="属性名称" width="170" />



      <el-table-column label="商品类型" width="120">
        <template #default="scope">
          {{ productType }}
        </template>
      </el-table-column>




      <el-table-column property="selectType" label="属性是否可选" width="170">
        <template #default="scope">
          {{ scope.row.selectType == 0 ? '唯一' : (scope.row.selectType == 1 ? "单选" : '多选') }}
        </template>
      </el-table-column>

      <el-table-column property="inputType" label="属性值的录入方式" width="170">
        <template #default="scope">
          {{ scope.row.inputType == 0 ? '手工输入' : '从列表中提取' }}
        </template>
      </el-table-column>





      <el-table-column property="inputList" label="可选值列表" />

      <el-table-column property="sort" label="排序" width="70" />

      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" type="primary">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 批量操作和分页器 -->
    <div class="bottom_line">
      <div class="bottom_line_left">
        <div>
          <el-select v-model="value" class="m-2" placeholder="批量操作">
            <el-option label="批量删除" :value="1" />
          </el-select>
        </div>
        <div>
          <el-button class="bottom_line_left_button" size="large" type="primary" @click="deleteMore">确定</el-button>
        </div>

      </div>
      <div>
        <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
          :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </div>




  </div>



</template>

<script lang='ts' setup>
import { Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs, ref, onMounted, watch } from 'vue'
import useTable from "@/hooks/useTable"
import * as api from "@/request/api"
import { useRouter, useRoute } from "vue-router";
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'

let route = useRoute()
let router = useRouter()
let productType = ref('')
let id = route.query.id
let type = Number(route.query.type)
let value = ref('')

productType.value=route.query.name

let {
  tableData,
  pagination,
  handleCurrentChange,
  handleSizeChange,
  getTableData
} = useTable(type == 0 ? api.product.productAttributeList : api.product.productAttributeList1, {
  id: id
})



//点击填加跳转到填加页面
let addItem = () => {
  router.push('addProductAttr')
}
// 删除
let onDelete = (id: any) => {
  ElMessageBox.confirm(
    '是否确认删除?',
    '提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(async () => {
    let form = new FormData()
    form.append('ids', id)
    await api.product.productAttrDelete(form)
    getTableData()
  })
}

//批量删除
const multipleSelection = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

let deleteMore = () => {
  console.log(multipleSelection.value);
  let arr = multipleSelection.value.map((item) => {
    return item.id
  })
  console.log(arr);


  ElMessageBox.confirm(
    '是否确认删除?',
    '提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(async () => {
    let form = new FormData()
    form.append('ids', arr.toString())
    await api.product.productAttrDelete(form)
    getTableData()
  })
}



</script>


<style scoped>
:deep .el-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box_left {
  display: flex;
}

.el-pagination {
  display: flex;
  justify-content: right;
}

:deep .el-table__header {
  width: 100% !important;
}

:deep .el-table__body {
  width: 100% !important;
}

.bottom_line {
  margin-top: 10px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.bottom_line_left {
  display: flex;
}

.bottom_line_left_button {
  height: 33px;
  margin-left: 10px;
}

:deep .cell {
  text-align: center;
}
</style>